<template>
    <div class="hover-pie space-full"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'HoverPie',
  mounted () {
    this.makeChart()
  },
  methods: {
    makeChart () {
      const data = [
        { name: 'aaa', value: 80 },
        { name: 'bbb', value: 89 },
        { name: 'ccc', value: 65 },
        { name: 'ddd', value: 12 },
        { name: 'eee', value: 14 },
        { name: 'fff', value: 32 },
        { name: 'ggg', value: 53 },
        { name: 'hhh', value: 33 },
        { name: 'iii', value: 89 },
        { name: 'jjj', value: 22 }
      ]
      const emphasisColor = [
        'rgba(33,143,253,0.5)',
        'rgba(253, 196, 69, 0.5)',
        'rgba(43, 253, 246, 0.5)',
        'rgba(125, 58, 247, 0.5)',
        'rgba(158, 248, 105, 0.5)',
        'rgba(253, 104, 69, 0.5)',
        'rgba(33, 64, 253, 0.5)',
        'rgba(246, 248, 105, 0.5)',
        'rgba(129, 135, 253, 0.5)',
        'rgba(18, 204, 101, 0.5)']
      const option = {
        backgroundColor: '#000',
        color: [
          '#218FFD',
          '#FDC445',
          '#2BFDF6',
          '#7D3AF7',
          '#9EF869',
          '#FD6845',
          '#2140FD',
          '#F6F869',
          '#8187FD',
          '#12CC65'],
        series: [{
          name: 'risk-in',
          type: 'pie',
          radius: ['40%', '65%'],
          avoidLabelOverlap: false,
          hoverAnimation: false,
          label: {
            show: false,
            position: 'center'
          },
          labelLine: {
            show: false
          },
          data
        }, {
          name: 'risk-out',
          type: 'pie',
          radius: ['65%', '74%'],
          minAngle: 5,
          hoverAnimation: false,
          itemStyle: {
            color: 'rgba(0,0,0,0)',
            borderWidth: 2,
            borderColor: 'rgba(0,0,0,0)'
          },
          label: {
            show: false,
            position: 'center'
          },
          labelLine: {
            show: false
          },
          data: data.map((item, index) => {
            return {
              name: item.name,
              value: item.value,
              itemStyle: {
                emphasis: {
                  color: emphasisColor[index]
                }
              }
            }
          })
        }]
      }
      const myChart = echarts.init(document.querySelector('.hover-pie'))
      myChart.setOption(option)
      myChart.on('mouseover', (params) => {
        if (params.seriesIndex === 0) {
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 1,
            dataIndex: params.dataIndex
          })
        }
      })
      myChart.on('mouseout', function (params) {
        if (params.seriesIndex === 0) {
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 1,
            dataIndex: params.dataIndex
          })
        }
      })
    }
  }
}
</script>
